<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    body{background-color: #fff;  }
    .save{ width: 100%; margin: 40px 0 0 0; text-align: center; }
    .save .save_btn{ font-size: 1.3rem; padding: 1rem 0; background: #3bb38d; display: inline-block; width: 95%; border-radius: 5px; }
    .save .save_btn a{ color: #fff; }
    .vip_center .vip_header { padding: 2rem 1rem; border-bottom: 0.8rem solid #efeff4 }
    .vip_center .vip_header .name{ color: #000; }
    .vip_center .vip_header .header_box{ box-shadow: 0 0 0 0 #f5f0f0 inset; padding-bottom: 0; }
    .vip_center .vip_span h4 { color: #000; box-shadow: 0 -1px 0 0 #ddd inset; }
    .vip_center .head_tips { width: 100%; text-align: center; color: #e78f08; font-size: 1.2rem; padding-top: 20px; }

    div.reward-wrap { background: #efeff4; }
    div.reward-wrap .content { width:100%; text-align: center; }
    div.reward-wrap input{ margin-top: 50px; padding: 10px; width: 95%; border:0; }
    div.reward-wrap .back{width: 100%;text-align: center;margin-top: 24px;font-size: 15px;}

    div.table{ width: 100%; display: table; padding: 5px 0;}
    div.table .item{ display: table-cell; vertical-align: top; padding: 5px; }
    div.table .item.tit{ width: 20px; font-size: 15px; line-height: 30px; white-space: nowrap; }

    div.table .item input{ font-family:"Microsoft YaHei"; width: 100%; border: 0; font-size: 15px; line-height: 15px; color: #999; text-align: right; padding: 5px 20px 5px 15px; outline: none; background: url(<%=basePath%>/app/images/right-arrow.png) no-repeat right 0px center / auto 16px; }
</style>
<div class="vip_center">
    <div class="head_tips">
        <span>完善个人信息，我们为您私人定制</span>
    </div>
    <script type="text/html" id="tpl-center">
        <div class="vip_header">
            <div class="header_box">
                <div class="touxiang">
                    <a href="#picture"><img src="{{resultList.head_url}}" alt="" id="vipHeadImgID"></a>
                </div>
                <div class="name">
                    <div style="padding-bottom: 10px;overflow: hidden;box-shadow: 0 -1px 0 0 #ece9e9 inset;">
                        <span>{{resultList.nick_name}}</span>
                    </div>
                </div>
            </div>
        </div>
        <ul class="vip_ul">
            <li>
                <div class="table" id="mobile">
                    <div class="item tit">手机</div>
                    <div class="item">
                        <input value="{{resultList.mobile}}" readonly />
                    </div>
                </div>
            </li>
            <li>
                <div class="table" id="sex">
                    <div class="item tit">性别</div>
                    <div class="item">
                        <input type="hidden" id="sexValue" value="">
                        <input id="sexSelect" value="{{sexFormat resultList.sex}}" readonly />
                    </div>
                </div>
            </li>
            <li>
                <div class="table change" id="wx_email">
                    <div class="item tit">邮箱</div>
                    <div class="item">
                        <input value="{{resultList.wx_email}}" readonly />
                    </div>
                </div>
            </li>
            <li>
                <div class="table" id="city">
                    <div class="item tit">城市</div>
                    <div class="item">
                        <input type="hidden" id="areaValue" value="">
                        <input id="areaSelect" value="{{resultList.province_name}} {{resultList.city_name}} {{resultList.area_name}}" readonly />
                    </div>
                </div>
            </li>
            <li>
                <div class="table change" id="address">
                    <div class="item tit">地址</div>
                    <div class="item">
                        <input value="{{resultList.address}}" readonly />
                    </div>
                </div>
            </li>
        </ul>
        <div class="save" id="save">
            <div class="save_btn">
                <a href="javascript:;">保存</a>
            </div>
        </div>
    </script>
</div>

<div class="reward-wrap" id="rewardWrap">
    <div class="content">
        <input type="hidden" id="changeId" />
        <input type="text" id="content" />
    </div>
    <div class="save">
        <div class="save_btn">
            <a href="javascript:;" id="logout">保存</a>
        </div>
    </div>
    <div class="back">
        <a style="color: #999">返回</a>
    </div>
</div>


<form enctype="multipart/form-data" id="headPicFormID" action="<%=basePath%>app/member/headIconEdit" style="display: none;" method="post">
    <input type="file" name="headIconFile" id="headPicID" onchange="uploadHeadPic();"/>
</form>
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell" style="display: none;">
            <a href="#">拍照</a>
        </li>
        <li class="mui-table-view-cell">
            <a href="javascript:void(0);" onclick="headPicID.click();">从相册选择</a>
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#picture"><b>取消</b></a>
        </li>
    </ul>
</div>
<script type="text/javascript" src="<%=basePath%>/app/js/jquery-form.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/js/LArea/LAreaData2.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/js/LArea/LArea.min.js"></script>
<script>
    $(function () {
        loadData();

        //打开修改页面
        mui('body').on("tap",".change", function () {
            var _ele = $(this),value = _ele.find("input").val();
            $('#rewardWrap').find("#content").val(value);
            $('#rewardWrap').find("#changeId").val(_ele.attr("id"));
            $('#rewardWrap').show();
            setTimeout(function(){
                $('html').addClass('reward-fixed');
            }, 200);
        });
        //返回主页面
        mui('#rewardWrap').on("tap",".back",function () {
            $('#rewardWrap').hide();
            $('html').removeClass('reward-fixed');
        });
        //保存修改
        mui('#rewardWrap').on("tap",".save",function () {
            var value=$('#rewardWrap').find("#content").val(),changeId=$('#rewardWrap').find("#changeId").val();
            $("#" + changeId).find("input").val(value);
            $('#rewardWrap').hide();
            $('html').removeClass('reward-fixed');
        });

        //提交修改
        mui('body').on('tap', "#save", function () {
            var areaValue = $("#areaValue").val(),areaText = $("#areaSelect").val(),province_id,city_id,area_id,province_name,city_name,area_name;
            if(!isEmpty(areaValue)){
                province_id = areaValue.split(",")[0];
                city_id = areaValue.split(",")[1];
                area_id = areaValue.split(",")[2];
                province_name = areaText.split(",")[0];
                city_name = areaText.split(",")[1];
                area_name = areaText.split(",")[2];
            }
            $.ajax({
                url: _basePath + "/app/member/edit",
                dataType : 'json',
                data: {
                    sex : $("#sexValue").val(),
                    wx_email:$("#wx_email").find("input").val(),
                    province_id:province_id,
                    city_id:city_id,
                    area_id:area_id,
                    province_name:province_name,
                    city_name:city_name,
                    area_name:area_name,
                    address:$("#address").find("input").val()
                },
                method: 'post',
                success :function (data) {
                    if(typeof data.resultList != undefined && data.resCode == 0){
                        mui.toast("修改成功")
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        })


    });

    function loadData() {
        //加载会员数据
        $.ajax({
            url: _basePath + "/app/member/info",
            dataType : 'json',
            success :function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    var _html = template('tpl-center', data);
                    $(".vip_center").append(_html);
                    initArea();
                    initSex();
                }
            }
        });
    }

    var uploadHeadPic = function(){
        var btnArray = ['否', '是'];
        mui.confirm("确认上传该图片作为头像？","头像上传",btnArray,function(e) {
            if (e.index == 1) {
                $("#headPicFormID").ajaxSubmit({
                    dataType:"json",
                    success:function(data){
                        if(data.resCode==0){
                            $("#vipHeadImgID").attr("src", data.message);
                            mui('#picture').popover('toggle');
                            mui.toast("上传成功");
                        }else{
                            mui.toast(data.message);
                        }
                    }
                })
            }
        })
    };

    function initArea() {
        var area2 = new LArea();
        area2.init({
            'trigger': '#areaSelect',
            'valueTo': '#areaValue',
            'keys': {
                id: 'value',
                name: 'text'
            },
            'type': 2,
            'data': [provs_data, citys_data, dists_data]
        });
    }

    function initSex() {
        var area2 = new LArea();
        area2.init({
            'trigger': '#sexSelect',
            'valueTo': '#sexValue',
            'keys': {
                id: 'value',
                name: 'text'
            },
            'type': 2,
            'data': [[{"text":"男","value":"1"},{"text":"女","value":"2"}]]
        });
    }

</script>